<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0325v-if</title>
    <style>
        .img{
            width: 60px;
            height: 60px;
        }
        span{
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>条件渲染指令</h1>
        <p>我会出现</p>
        <p v-if="val1">我不会出现</p>
        <p v-else>我是备胎</p>
        <button @click="val1 = ! val1">toggle</button>
        <hr>
        人生不相见，动如参与商。
        <br>
        <hr>
        <p v-if="gender == 'nan'">教练，我要打篮球</p>
        <template v-else-if="gender == 'nv'">
            <p >漂亮的小姐姐永远那么漂亮</p>
            <p>那么可爱</p>
            <p>那么动人</p>
        </template>
        <p v-else>泰国欢迎你，来一场人妖之旅</p>
        <input type="text" v-model="gender">
        <hr>
        <h2>key 属性--用来表示是否需要重新渲染</h2>
        <template v-if="type == 'userName'">
            <label >请输入用户名:</label>
            <input type="text" placeholder="请输入用户名" key="1">  
            <br>
        </template>
        <template v-else>
            <label >请输入手机号:</label>
            <input type="text" placeholder="请输入手机号" key="2">  
            <br>
        </template>
        <button @click="changeType">切换登录方式</button>
        <p>vue 中默认使用最高效的dom更新方式，即尽可能的复用旧的元素。</p>
        <p>如果不想要复用，需要给元素添加key这个属性，且属性值唯一。</p>
        <p>如果key值相同表示可以复用，与默认相同</p>
        <hr>
        <p v-show="val1">显示-- v-show</p>
        <p v-show="val2">隐藏</p>
        <hr>
        <h2>请问v-if和v-show有什么区别吗？分别使用于什么场景</h2>
        <p>v-if表示元素一开始并没有被渲染在界面上，然后随着true或者false的切换，元素是否被渲染到界面上的状态切换，来控制元素是否显示</p>
        <p>v-show表示元素一开始便被渲染到了界面上，只不是display：none或者display：black的切换，来控制元素的是否显示</p>
        <p>一般频换切换是否显示的状态，我们使用v-show，以避免资源的浪费<br>不频繁切换状态使用v-if</p>
        <hr>
        <p>v-for 的使用</p>
        <span  v-for="huluwa in huluwas" >{{huluwa}}</span>
        <br>
        <span v-for="img in imgs" >
            <img :src="'./img/'+img+'.jpg'" class="img">
        </span>
        <hr>
        <span v-for="cart in cartList">名字：{{cart.name}},价格：{{cart.price}}</span>
        
    </div>
    <script src="./js/vue.js"></script>
    <script>
    let vm = new Vue({
        el:'#app',
        data: {
            val1: true,
            val2: false,
            gender: 'nv',
            type: 'userName',
            huluwas: [
                'yi娃', 'er娃', 'san娃', 'si娃', 'wu娃', 'liu娃', 'qi娃'
            ],
            imgs: [
                '1', '2', '3', '4'
            ],
            cartList:[
                {
                    name:'huawei',
                    price:3999,
                },
                {
                    name:'mi 10',
                    price:5999,
                }
            ],

        },
        methods: {
            changeType:function(){
                this.type=='userName' ? this.type='phone' : this.type='userName';
            }
        },
    })
    </script>
</body>
</html>